
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>${setting.siteName} - 主页</title>
    <meta name="keywords" content="${setting.siteName}">
  	<meta name="description" content="${setting.siteName}">

  	<!-- BEGIN HEADER -->
		[#include "/admin/include/style.ftl"]

    <link href="${base}/resources/css/common-upload.css" rel="stylesheet">
	<!-- END HEADER -->
    <style>
        .ke-container{
            width: 100% !important;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                    	 <h5>编辑广告</h5>
                    	 <div class="ibox-tools">
                    	 	<button type="button" class="btn btn-outline btn-white btn-xs" id="btn-return-loippi" 
                    	 	onclick="location.href='../list.jhtml'"><i class="fa fa-reply-all"></i> 返回列表</button>
                        </div>
                    </div>            	
                  	<div class="ibox-content">
                  		<form id="saveAclForm" class="form-horizontal" [#--action="${base}/admin/ad/update.jhtml"--] method="post">
                  		<input type="hidden" value="${ad.id}" name="id"/>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label class="col-sm-3 control-label"><span class="required"> * </span>广告位置</label>
                                        <div class="col-sm-9">
                                            <select id="position" class="form-control" name="position" maxlength="200">
                                                <option value="1" [#if ad.position == 1]selected[/#if]>个人中心</option>
												<option value="2" [#if ad.position == 2]selected ="selected"[/#if]>爱仓优选</option>
												<option value="3" [#if ad.position == 3]selected ="selected"[/#if]>优品上线</option>
												<option value="4" [#if ad.position == 4]selected ="selected"[/#if]>口碑热销</option>
												<option value="5" [#if ad.position == 5]selected ="selected"[/#if]>猜你喜欢</option>
												<option value="6" [#if ad.position == 6]selected ="selected"[/#if]>新品首发</option>
											</select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        <div class="form-group">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label"><span class="required"> * </span>${message("Ad.title")}</label>
	                                <div class="col-sm-9">
	                                    <input type="text" name="title" class="form-control" maxlength="200" value="${(ad.title)!''}"/>
	                                </div>
                       			</div>
                       		</div>
                        </div>
                        <div class="form-group">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label"><span class="required"> * </span>广告图片</label>
	                                <div class="col-sm-9">
	                                    <div style="width:200px;height:200px">
		                               		<img id="image" src ="${ad.image}" style="width: 200px;height: 200px; display: block" class="imgPath"></img>
		                                </div>
										<input type="hidden" name="image" id="imageInput" value="${ad.image}" class="form-control" />
                                        <input type="file" name="file" id="uploadCut" class="form-control upload" maxlength="200" />
                                        <input type="button" id="uploadBtn" class="btn btn-warning uploadBtn" style="top: 200px" value="新增图片"/>
	                                    <p style="color:red"> 图片规格为375*249</p>
	                                </div>
                       			</div>
                       		</div>
                        </div>
                        <div class="form-group">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label"><span class="required"> * </span>开始时间</label>
	                                <div class="col-sm-9">
	                                    <input type="text" name="startDate" class="form-control" maxlength="200" value="${(ad.startDate?string('yyyy-MM-dd'))!''}" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"/>
	                                </div>
                       			</div>
                       		</div>
                        </div>
                        <div class="form-group">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label"><span class="required"> * </span>结束时间</label>
	                                <div class="col-sm-9">
	                                    <input type="text" name="endDate" class="form-control" maxlength="200" value="${(ad.endDate?string('yyyy-MM-dd'))!''}" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"/>
	                                </div>
                       			</div>
                       		</div>
                        </div>
                        <div class="form-group">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label"><span class="required"> * </span>排序数字</label>
	                                <div class="col-sm-9">
	                                    <input type="text" name="sorts" class="form-control" maxlength="200" value="${(ad.sorts)!''}"/>
	                                </div>
                       			</div>
                       		</div>
                        </div>
                        <div class="form-group">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label"><span class="required"> * </span>广告类型</label>
	                                <div class="col-sm-9">
	                                    <select id="adType" name="type" class="form-control" maxlength="200" value="${(ad.type)!''}">
	                                    	<option value="1" [#if ad.type == 1] selected="selected" [/#if]>外部链接</option>
	                                    	<option value="2" [#if ad.type == 2] selected="selected" [/#if]>图文详情</option>
	                                    	<option value="3" [#if ad.type == 3] selected="selected" [/#if]>商品详情</option>
	                                    	<option value="4" [#if ad.type == 4] selected="selected" [/#if]>专题</option>
                                            <option value="5" [#if ad.type == 5] selected="selected" [/#if]>分类</option>
	                                    </select>
	                                </div>
                       			</div>
                       		</div>
                        </div>
 						
 						<!-- 三种广告类型 -->
 						<div class="form-group" id="urlGroup" >
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label">${message("Ad.url")} </label>
	                                <div class="col-sm-9">
	                                	<input type="text" name="url" class="form-control" maxlength="200" value="${(ad.url)!''}" />
	                                </div>
                       			</div>
                       		</div>
                        </div>

							<!-- 三种广告类型 -->
							<div class="form-group" id="columnGroup" style="display:none">
								<div class="row">
									<div class="col-sm-6">
										<label class="col-sm-3 control-label">"专题"</label>
										<div class="col-sm-9">
											<select type="text" name="columnId" class="form-control">
												[#list columnList as col]
													<option value="${col.id}" [#if col.id == ad.columnId]selected[/#if]>${col.name}</option>
												[/#list]
											</select>
										</div>
									</div>
								</div>
							</div>

                         <div class="form-group" id="itemGroup" style="display:none">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label">商品详情</label>
	                                <div class="col-sm-9">
	                                	<input type="hidden" name="goodsId" class="form-control" maxlength="200" id="skuId" value="${(product.id)!''}"/>
	                                   <input type="text" id="messageText" class="form-control" maxlength="200" readOnly=true value="${(product.name)!''}"/>
	                                   <label class="label label-primary" id="selectGoods"  data-toggle="modal">选择商品</label>
	                                </div>
                       			</div>
                       		</div>
                        </div>
                         <div class="form-group" id="contentGroup" style="display:none">
                       		<div class="row">
                       			<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label">图文详情</label>
	                                <div class="col-sm-9">
	                                	<textarea id="editor" name="content" class="editor">${(ad.content)!''}</textarea>
	                                </div>
                       			</div>
                       		</div>
                        </div>

                            [#--分类广告--]
                            <!--/row-->
                            <div class="form-group" id="cateAd">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label class="col-sm-3 control-label">所有分类</label>
                                        <div class="col-sm-9">
                                            <select class="form-control"  name="categoryId">
                                                <option value="">请选择</option>
                                                [#list the_first_level as first]
                                                    [#if first.parentId == 0]
                                                        <option value="${(second.id)!''}" [#if first.id ==  ad.categoryId] selected="selected" [/#if] style="font-size: 15px;color: #3b3999;">${(first.name)!''}</option>
                                                        [#list the_second_level as second]
                                                            [#if first.id == second.parentId]
                                                                <option value="${(second.id)!''}" [#if second.id ==  ad.categoryId] selected="selected" [/#if]>&nbsp;&nbsp;&nbsp;&nbsp;${(second.name)!''}</option>
                                                            [/#if]
                                                        [/#list]
                                                    [/#if]
                                                [/#list]
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="hr-line-dashed"></div>
	                    <div class="form-group">
	                        <div class="col-sm-12 col-sm-offset-10">
	                        	<button type="button" class="btn btn-default" onclick="window.history.back();">返回</button>
	                            <button class="btn btn-success" type="submit">保存内容</button>
	                        </div>
	                    </div>
	                    </form>
	                    
	                    <!-- 模态框 -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
	                        <div class="modal-dialog"> 
	                            <div class="modal-content" style="width:900px"> 
	                                <div class="modal-header"> 
	                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
	                                    <h4 class="modal-title" id="myModalLabel">选择商品</h4> 
	                                </div> 
	                                <div class="modal-body" id="modalBody">
			                                <div class="row">
			                                    <div class="col-sm-12">
			                                        <div class="ibox float-e-margins">
			                                        	<form id="productlistform" action="${base}/admin/ad/findProductListOfModel.jhtml" method="get">
			                                            
			                                            <div class="ibox-content">
			                        	                        <div class="row">
			                        						      
			                        						        
																	<div class="col-sm-12 m-b-xs">
											                            <div class="col-sm-4 m-b-xs">
																        <select name="filter_stairId" class="input-sm form-control" id="parentsId">
																        <option value=''>一级分类</option>
																        [#list classifys as item]
																        <option value="${item.id}">${item.name}</option>
																        [/#list]       
																	    </select>
											                            </div>
																        <div class="col-sm-4 m-b-xs">
																        <select name="filter_secondLevelId" id="secondLevelId" class="form-control">
																			<option value=''>二级分类</option>
																		</select>
											                            </div>
											                            <div class="col-sm-4">
																		<select name="filter_threeLevelId" id="threeLevelId" class="form-control">
																			<option value=''>三级分类</option>
																		</select>
																		</div>
										                            </div>
										                            
			                        						        <div class="col-sm-3 m-b-xs">
			                        						        	<input type="text" placeholder="请输入商品名称" name="filter_name" value="${(parameter.title)!''}" class="input-sm form-control">
			                        		                        </div>
			                        		                     
			                        		                        <div class="col-sm-1">
			                        		                            <div class="input-group">
			                        		                                 <label id="searchM" class="btn btn-sm btn-primary" onclick="selectProductList(1)"> 搜索</label> </span>
			                        		                            </div>
			                        		                        </div>
			                        		                    </div>
			                        						   <div class="dataTables_wrapper form-inline">
			                                                    <table class="table table-striped table-bordered table-hover dataTables-example dataTable">
			                                                        <thead>
			                                                            <tr>
		
			                                                                <th></th>
			                                                                <th>商品名称</th>
			                                                                <th>商品分类</th>
			                                                            </tr>
			                                                        </thead>
			                                                        <tbody id="product_tbody">
			                                                        </tbody>
			                                                    </table>
			                                               		<div class="col-md-12 col-sm-12" style="text-align: center;">
												                    <input type="hidden" id="pageNum" name="pageNumber" value="1" />
												                    <a class="btn btn-info" data-totalPage="0" id="pre">上一页</a>
												                    <i>第<span id="pageNumb">1</span>页</i>
												                    <a class="btn btn-info" data-totalPage="0" id="next">下一页</a>
											                   </div>
			                                                </div>
			                                            </div>
			                                            </form>
			                                        </div>
			                                    </div>
			                                </div>
			                            </div>
	                                <div class="modal-footer"> 
	                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
	                                    <label class="btn btn-primary submitVal">提交</label> 
	                                </div> 
	                            </div><!-- /.modal-content --> 
	                        </div><!-- /.modal --> 
	                    </div>
	                    
                  	</div>
                </div>
            </div>
        </div>
    </div>
	
	<!-- BEGIN Script -->
		[#include "/admin/include/script.ftl"]
	<!-- END Script -->
	
    <script>
    
        $(document).ready(function () {
			$("#browserButton").browser({input:$("#image")});
			
        	$(".chosen-select").chosen({width:"100%"}); 
        	
        	$(".input-daterange").datepicker({keyboardNavigation:false,forceParse:false,autoclose:true});
        	
        	//字段验证
        	jQuery("#saveAclForm").validate({
                rules: {
                   title: {
						required: true
					},
					image: {
						required: true
					},
					startDate: {
						required: true
					},
					endDate: {
						required: true
					},
					sorts:{
						required: true,
						digits : true
					},
					type:{
						required: true,
						digits : true
					}
                },
                messages: {
				},

				submitHandler: function (form) {
					$("#adType").removeAttr("disabled", false)
					$.ajax({
						url: "${base}/admin/ad/update.jhtml",
						data:$(form).serialize(),
						type:"POST",
						dataType:"json",
						success: function (resp) {
							art.message(resp)
							if ("success" == resp.type) {
								window.setTimeout(function() {
									window.location.href = "${base}/admin/ad/list.jhtml";
								}, 500);
							}
						}
					});
				},
				invalidHandler: function(form, validator) {return false;}

            });


       		var value = $("#adType").val();
			if(value==1){
				$("#urlGroup").show();
				$("#contentGroup").hide();
				$("#itemGroup").hide();
				$("#columnGroup").hide();
				$("#cateAd").hide();
			}else if(value==2){
				$("#urlGroup").hide();
				$("#contentGroup").show();
				$("#itemGroup").hide();
				$("#columnGroup").hide();
                $("#cateAd").hide();
			}else if(value==3){
				$("#urlGroup").hide();
				$("#contentGroup").hide();
				$("#itemGroup").show();
				$("#columnGroup").hide();
                $("#cateAd").hide();
			}
			else if(value==4) {
				$("#urlGroup").hide();
				$("#contentGroup").hide();
				$("#itemGroup").hide();
				$("#columnGroup").show();
				//$("#adType").attr("disabled", true);
                $("#cateAd").hide();
			}
            else if(value==5) {
                $("#urlGroup").hide();
                $("#contentGroup").hide();
                $("#itemGroup").hide();
                $("#columnGroup").hide();
                //$("#adType").attr("disabled", true);
                $("#Five").show();
            }
        	
        	
        });/* ready */

/*		$("#position").on("change", function() {
			var $this = $(this);
			if ("1" != $this.val()) {
				$("#adType").val(4);
				$("#adType").attr("disabled", true);
				$("#urlGroup").hide();
				$("#contentGroup").hide();
				$("#itemGroup").hide();
				$("#columnGroup").show();
                $("#Five").hide();
			} else {
				$("#adType").removeAttr("disabled", false)
			}
		});*/

      //广告图片上传
        $('#uploadCut').on('change',function(){
       	 var formData = new FormData();
    		var img_file = document.getElementById("uploadCut");
    		var fileObj = img_file.files[0]; 
    		formData.append("file",fileObj);
    		formData.append("fileType","image");
    		$.ajax({
   			url:'${base}/admin/file/upload.jhtml',
   			type:'POST',
   			data:formData,
   			async:false,
   			processData:false,
   			contentType:false,
   			success:function(data){
   				data=JSON.parse(data);
				$("#image").show();
				$("#image").css("width","200px");
	         	$("#image").css("height","200px");
				$("#image").attr("src",data.url);
				$("#imageInput").val(data.url);
				$('#uploadBtn').val("重新上传");
				$('#uploadBtn').css("top","200px");
   			}
        }); 
        });
        
        
      //根据广告类型显示不同的内容
        $("#adType").change(function(){
        	var value = $(this).val();
			if(value==1){
				$("#urlGroup").show();
				$("#contentGroup").hide();
				$("#itemGroup").hide();
				$("#columnGroup").hide();
                $("#cateAd").hide();
			}else if(value==2){
				$("#urlGroup").hide();
				$("#contentGroup").show();
				$("#itemGroup").hide();
				$("#columnGroup").hide();
                $("#cateAd").hide();
			}else if(value==3){
				$("#urlGroup").hide();
				$("#contentGroup").hide();
				$("#itemGroup").show();
				$("#columnGroup").hide();
                $("#cateAd").hide();
			}
			else if(value==4){
				$("#urlGroup").hide();
				$("#contentGroup").hide();
				$("#itemGroup").hide();
				$("#columnGroup").show();
                $("#cateAd").hide();
			}
            else if(value==5){
                $("#urlGroup").hide();
                $("#contentGroup").hide();
                $("#itemGroup").hide();
                $("#columnGroup").hide();
                $("#cateAd").show();
            }
        })
        
        /* 广告类型-商品详情-model-起 */ 
     	//点击弹出模态框
        $("#selectGoods").click(function(){
        	selectProductList(1)
        	$('#myModal').modal('show')
        	});
       //model中的数查询
		function selectProductList(pageNum){
			$("#pageNum").val(pageNum);
			var data=$("#productlistform").serialize();
			$.ajax({
				url:"${base}/admin/ad/findProductListOfModel.jhtml",
        		type:"POST",
        		data: data,
        		dataType:"json",
        		success:function(result){
        			if(result.object != null){
        				$("#product_tbody").html("");
        				var html = "";
        				var page = result.object;
        				var item = result.object.content;
        				for(var i in item){
        					html += '<tr>'
        						+'<td><input type="checkbox" class="checkbox" name="ids" value="'+item[i].name+'-'+item[i].id+'"/></td>'
        						+'<td>'+item[i].name+'</td>'
        						+'<td>'+item[i].stairName+'>'+item[i].secondLevelName+'>'+item[i].threeLevelName+'</td>'
        						+'</tr>';
        				}
        				html += "";
        				$("#product_tbody").append(html);
        				$("#pageNum").val(page.pageNumber);
        				$("#pageNumb").text(page.pageNumber);
        				$("#next").attr("data-totalPage", page.totalPages);
        				$("#pre").attr("data-totalPage", page.totalPages);
        			}
        		}
			});
		}
       
		 /* 下一页点击实现效果 */
        $("#next").on("click", function() {
        	var totalPage = $(this).attr("data-totalPage");
        	var pageNum = $("#pageNum").val();
        	if (parseInt(pageNum) >= parseInt(totalPage)) {
        		alert("没有下一页了");
        	}else if(totalPage <= 1){
        		alert("没有下一页了");
        	}else {
        		selectUser(parseInt(pageNum) + 1);
        	}
        });
        
        /* 上一页点击实现效果 */
        $("#pre").on("click", function() {
        	var totalPage = $(this).attr("data-totalPage");
        	var pageNum = $("#pageNum").val();
        	if (parseInt(pageNum) == 1) {
        		alert("没有上一页了");
        	}else {
        		selectUser(parseInt(pageNum) - 1);
        	}
        });
       
      //复选框，作单选使用
        $('#product_tbody').on('click', '.checkbox', function() {
        	var item = $(this);
			$("input[type='checkbox']").each(function(){
				if(this.checked){
					$(this).prop({"checked":false})
				}
			})
			item.prop({"checked":true})
			return true;
        });
		//模态框提交，隐藏模态框，输出商品name和id到广告add表单中
		$(".submitVal").click(function(){
			
			var text
			$("input[type='checkbox']").each(function(){
				if(this.checked){
					text = $(this).val();
				}
			})
			var skuId = text.split("-")[1];	//商品id
			var html = text.split("-")[0];	//商品名称
			$("#messageText").val(html);
			$("#skuId").val(skuId);
			console.log("skuId"+skuId);
			$('#myModal').modal('hide')
		});
		
		
		
		//模态框-----(一级分类change事件)
	     $("#parentsId").change(function(){
	    	var parentId=$("#parentsId").val();
	    	var showId=$("#secondLevelId");
	    	$("#secondLevelId").empty();
	    	$("#threeLevelId").empty();
	    	var optStr="<option value=''>二级分类</option>";
	    	var secondStr="<option value=''>三级分类</option>";
	    	$("#secondLevelId").append(optStr);
	    	$("#threeLevelId").append(secondStr);
	    	requestCalss(parentId,showId);
	    	
	     });
		
	   //模态框-----(二级分类change事件)
	     $("#secondLevelId").change(function(){
	    	var secondLevelId=$("#secondLevelId").val();
	    	var threeLevelId=$("#threeLevelId");
	    	$("#threeLevelId").empty();
	    	var optStr="<option value=''>三级分类</option>";
	    	$("#threeLevelId").append(optStr);
	    	requestCalss(secondLevelId,threeLevelId);
	     });
	     
	  	// 查找子商品分类
	     function requestCalss(parentId,childElement){
	     	var url="${base}/admin/tproduct/findChildClass.json";
	     	$.ajax({
	     		type: "post",
	     		async: true,
	     		url: url,
	     		data: "id=" + parentId ,
	     		timeout: 1000,
	     		dataType: "json",
	     		success: function(data) {
	     			if(data.code==='1'){
	     				var dataAttr=data.object;
	     				for(var i=0;i<dataAttr.length;i++){
	     					var optStr="<option value='"+dataAttr[i].id+"'>"+dataAttr[i].name+"</option>";
	     					childElement.append(optStr);
	         			}
	     			}
	     		},
	     		error: function() {
	     		}
	     	});
	     }
		
		
		
		
     	/* 广告类型-商品详情-止 */
    </script>
</body>

</html>
